<template>
    <div class="main">
      <!-- 导航栏 -->
      <nav-menu></nav-menu>
      <main>
        <!-- 主页内容(第一行) -->
        <div class="row_one">
          <!-- 学科教材目录(未登录) -->
          <div v-if="isLogin === false" class="catalogue">
            <el-tabs type="card"  stretch="true">  
              <el-tab-pane>
                <span slot="label" class="title" @click="getPrimarySubjects">小学</span>
                <div
                  class="subjectlist"
                  @mouseover="gradelistshow = true,getGrades(subject)"
                  @mouseleave="gradelistshow = false"
                  v-for="subject in subjects"
                >{{subject}}
                <i class="el-icon-arrow-right" ></i>
                </div>
              </el-tab-pane>
              <el-tab-pane>
                <span slot="label" class="title"  @click="getMiddlleSubjects">初中</span>
                <div
                  class="subjectlist"
                  @mouseover="gradelistshow = true,getGrades(subject)"
                  @mouseleave="gradelistshow = false"
                  v-for="subject in subjects"
                >{{subject}}
                <i class="el-icon-arrow-right" ></i>
                </div>
              </el-tab-pane>
              <el-tab-pane>
                <span slot="label" class="title" @click="getHighSubjects">高中</span>
                <div
                  class="subjectlist"
                  @mouseover="gradelistshow = true,getGrades(subject)"
                  @mouseleave="gradelistshow = false"
                  v-for="subject in subjects"
                >{{subject}}
                <i class="el-icon-arrow-right" ></i>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <!-- 学科教材目录(已登录) -->
          <div v-if="isLogin === true"  class="catalogue">
            <el-tabs type="card" v-model="activeName" stretch="true">
              <el-tab-pane
                v-for="period in periods"
                :name="period"
                :key="period"
              >
                <span slot="label" class="title" @click="getSubjects(period)">{{period}}</span>
                <div
                  class="subjectlist"
                  @mouseover="gradelistshow = true,getGrades(subject)"
                  @mouseleave="gradelistshow = false"
                  v-for="subject in subjects"
                >{{subject}}
                <i class="el-icon-arrow-right" ></i>
                </div>
                <el-link type="primary" :underline="false"  class="clickshow" v-if="teacherperiod === period" @click="clickshowSubject(period)">{{isshow ? "点击收起":"点击展开其他学科"}}</el-link>
              </el-tab-pane>  
            </el-tabs>
          </div>
          <div class="gradelist" 
            v-show="gradelistshow"
            @mouseover="gradelistshow = true"
            @mouseleave="gradelistshow = false"
            >
            <div
              @mouseover="cataloguelistshow = true,getCourses(grade)"
              @mouseleave="cataloguelistshow = false"
              class="gradelist_item"
              v-for="grade in grades"
            >{{grade}}
            
            <i class="el-icon-arrow-right" ></i>
            </div>
          </div>
          <div class="cataloguelist" 
            v-show="cataloguelistshow"
            @mouseover="cataloguelistshow = true, gradelistshow = true"
            @mouseleave="cataloguelistshow = false, gradelistshow = false"
            >
            <div class="catalogtree" 
              :style="{height: '370px', width: '300px'}" 
              style="overflow-y: scroll">
              <p style="margin-bottom: 2%;margin-top: 2%; text-align: center;">{{selectedPeriod}} {{selectedSubject}} {{selectedGrade}}  教材目录</p>
              <el-tree
                :data="courseTree"
                :props="defaultProps"
                accordion
                style="width:95% ;  background:#fdfbfb; font-size:15px"
                class="tree"
                @node-click="handleNodeClick"
              >
              </el-tree>
            </div>
          </div>
          <!-- 轮播图 -->
          <div class="carousel">
            <el-carousel :interval="5000" trigger="click" height="400px">
              <el-carousel-item v-for="item in carouselData" :key="item.id">
                <div class="carousel-container">
                  <el-image
                    :src="'http://221.231.140.222:9099/resource' + item.cover"
                    fit="cover"
                    @click="viewResource(item.id)"
                  ></el-image>
                </div>
              </el-carousel-item>
              <!-- 隐藏的a元素，用来在新窗口打开资源页面 -->
              <a
                v-show="false"
                ref="resourceTarget"
                class="resource-target"
                href=""
                target="_blank"
              ></a>
            </el-carousel>
          </div>
          <!-- 热门资源和最新资源 -->
          <div class="card">
            <el-tabs type="card" stretch="true">
              <el-tab-pane>
                <span slot="label" class="title">热门资源</span>
                <div class="list-container">
                  <resource-list
                    :resourceList="hotResources"
                    :browseTime="true"
                    :isHidden="true"
                  ></resource-list>
                </div>
              </el-tab-pane>
              <el-tab-pane>
                <span slot="label" class="title">最新资源</span>
                <div class="list-container">
                  <resource-list-with-time
                    :resourceList="newResources"
                    :browseTime="true"
                    :isHidden="true"
                    :displayed-prop="'updateTime'"
                  ></resource-list-with-time>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="row_two">
          <div class="concept">
            <h2>核心素养与学科大概念</h2>
            <concept-view></concept-view>
          </div>
        </div>
        <div class="row_tree">
          <div class="boutique-container">
            <h2>精选资源</h2>
            <div class="boutique-resource">
              <el-tabs class="boutique-resource-head" v-model="activeName_type">
                <el-tab-pane 
                  v-for="type in resourceTypes"  
                  :key="type" 
                  :name="type"
                  >
                  <span slot="label"  @click="getBoutique(type)">{{type}}</span>
                  <div v-if="type!='图片'" class="boutique-resource-body"> 
                    <div
                      v-for="resource in boutiqueResources"
                      :key="resource.id"
                      class="resource-info"
                    >
                      <el-image
                        :src="prefix + resource.id + '.png'"
                        fit="cover"
                        class="thumbnail"
                        lazy
                        @click="viewResource(resource.id)"
                      ></el-image>
                      <router-link
                        :to="`/resource/${resource.id}`"
                        target="_blank"
                        class="resource-name"
                      >
                        {{ resource.resourceName }}
                      </router-link>
                    </div>
                  </div>
                  <div v-if="type==='图片'" class="boutique-resource-body">
                    <div
                      v-for="resource in boutiqueResources"
                      :key="resource.id"
                      class="resource-info"
                    >
                      <el-image
                        :src="prefix + resource.id + '.png'"
                        fit="cover"
                        class="thumbnail_img"
                        lazy
                      ></el-image>
                      <div class="resource-name_img">{{ resource.resourceName }}</div>

                    </div>
                  </div>  
                </el-tab-pane>
              </el-tabs>

              
            </div>
          </div>
          <div class="resource-statistics">
            <h2>数据统计</h2>
            <data-statistics></data-statistics>
          </div>
        </div>
        <div class="row_four">
          <div class="linkcard">
            <h2>资源来源</h2>
            <div class="resourcelink">
              <div class="link" @click="godearedu">
                <img src="../assets/resourcelink/dearedu.png" STYLE="width: 100%"/>
                <p>第二教育网</p> 
              </div>
              <div class="link" @click="gozxxk">
                <img src="../assets/resourcelink/zxxk.png" STYLE="width: 100%"/>
                <p>学科网</p>
              </div>
              <div class="link" @click="goshijuan1">
                <img src="../assets/resourcelink/shijuan1.png" STYLE="width: 100%"/>
                <p>第一教试卷网</p>
              </div>
              <div class="link" @click="gojyeoo" >
                <img src="../assets/resourcelink/jyeoo.png" STYLE="width: 110%"/>
                <p>菁优网</p>
              </div>
              <div class="link" @click="gojiaoxi">
                <img src="../assets/resourcelink/51jiaoxi.png" STYLE="width: 100%"/>
                <p>教习网</p>
              </div>
              <div class="link" @click="go21cnjy">
                <img src="../assets/resourcelink/21cnjy.png" STYLE="width: 100%"/>
                <p>21世纪教育网</p>
              </div>
            </div>
          </div>
        </div>
        <div class="row_five">
          <div class="linkcard">
            <h2>友情链接</h2>
            <div class="resourcelink">
              <div class="govlink" @click="gofirst">
                <img src="../assets/resourcelink/jiangsusheng.png" STYLE="width: 105%"/>
              </div>
              <div class="govlink" @click="gosecond">
                <img src="../assets/resourcelink/taizhoujiaoyu.png" STYLE="width: 80%"/>
              </div>
              <div class="govlink" @click="gothird">
                <img src="../assets/resourcelink/xinghua.png" STYLE="width: 90%"/>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
</template>

<script>
import NavMenu from '@/components/NavMenu'
import ConceptView from '@/components/ConceptView'
import ResourceList from '@/components/ResourceList'
import ResourceListWithTime from '@/components/ResourseListWithTime'
import DataStatistics from '@/components/DataStatistics'
import { globalUrl } from '@/config'
import { carousel } from '@/api/recommend'
import { authentication,register } from '@/api/auth'
import {
  hotResource,
  newResource,
  userRecommendResource,
  boutiqueResource,
  queryBoutiqueByType
} from '@/api/recommend'
import { getSubjects } from '@/api/menu'
import { getCatalog, getCatalogGrade, getCatalogSubject } from '@/api/catalog'
import { searchEntity, relatedEntity, entityIllustration } from '@/api/entity'
import { TabPane } from 'element-ui'

export default {
  name: 'HomePageTest',
  components: {
    NavMenu,
    ConceptView,
    ResourceList,
    ResourceListWithTime,
    DataStatistics,
  },
  data() {
    return {
      // data
      carouselData: [],
      hotResources: [],
      newResources: [],
      recommendResources: [],
      gradelistshow: false,
      cataloguelistshow: false,
      periods: ['小学', '初中', '高中'],
      subjects: [],
      grades: [],
      courses: [],
      selectedPeriod: '',
      selectedSubject: '',
      selectedGrade: '',
      isLogin: false,
      activeName: '',
      userType:0,
      teacherperiod:'',
      teachersubject:'',
      userinfo: JSON.parse(window.localStorage.getItem('user')),
      isshow:false,
      selectedType:'',
      resourceTypes: ['全部', '课件', '教案', '微课', '试题', '文献资料', '图片'],
      // resourceTypes: [
      //   {
      //     label: '全部',
      //     code: 0
      //   },
      //   {
      //     label: '课件',
      //     code: 4
      //   },
      //   {
      //     label: '教案',
      //     code: 6
      //   },
      //   {
      //     label: '微课',
      //     code: 1
      //   },
      //   {
      //     label: '试题',
      //     code: 2
      //   },
      //   {
      //     label: '文献资料',
      //     code: 5
      //   },
      //   {
      //     label: '图片',
      //     code: 7
      //   }
      // ],
      boutiqueResources: [],
      prefix: globalUrl.coverUrl,
    }
  },
  computed: {
    // computed
    courseTree() {
      // 将courses数组内的数据进行整理，整理成目录树需要的结构，存放在数组m内，最后return
      const m = []
      this.courses.forEach(course => {
        if (m.length === 0) {
          m.push({
            label: course.unit,
            children: []
          })
          const l = m.at(-1)
          if (course.name) {
            l.children.push({ label: course.name })
          }
        } else {
          const i = m.find(item => item.label === course.unit)
          if (i) {
            i.children.push({
              label: course.name
            })
          } else {
            m.push({
              label: course.unit,
              children: []
            })
            const l = m.at(-1)
            if (course.name) {
              l.children.push({ label: course.name })
            }
          }
        }
      })
      return m
    }
  },
  watch: {},
  created() {
    authentication().then((response) => {
      if (response.data.code === 200) {
        this.isLogin = true
        this.getNowSubjects()
      }else{
        this.getNowSubjects_unlogin()
      }
    })
    this.userType = this.userinfo.userType
    this.teachersubject = this.userinfo.subject
    if(this.userinfo.period === 2){
      this.teacherperiod = "小学"
    }else if(this.userinfo.period === 3){
      this.teacherperiod = "初中"
    }else if(this.userinfo.period === 4){
      this.teacherperiod = "高中"
    }
  },
  mounted() {
    // mounted
    this.getCarousel()
    this.getHotResource()
    this.getNewResource()
    this.getNowBoutique()
  },
  methods: {
    // methods
    //学科目录（未登录）
    getPrimarySubjects(){
      this.selectedPeriod = '小学'
      this.selectedSubject = ''
      getCatalogSubject(this.selectedPeriod).then(({ data }) => {
        this.subjects = data.data
      })
    },
    getMiddlleSubjects(){
      this.selectedPeriod = '初中'
      this.selectedSubject = ''
      getCatalogSubject(this.selectedPeriod).then(({ data }) => {
        this.subjects = data.data
      })
    },
    getHighSubjects(){
      this.selectedPeriod = '高中'
      this.selectedSubject = ''
      getCatalogSubject(this.selectedPeriod).then(({ data }) => {
        this.subjects = data.data
      })
    },
    //获取当前学科目录
    getNowSubjects_unlogin(){
      this.activeName = '小学'
      this.selectedPeriod = this.activeName
      getCatalogSubject(this.selectedPeriod).then(({ data }) => {
        this.subjects = data.data
      })
    },
    //学科目录（已登录）
    getNowSubjects(){
        if(this.userType === 0){
          this.activeName = '小学'
          this.selectedPeriod = this.activeName
          getCatalogSubject(this.selectedPeriod).then(({ data }) => {
          this.subjects = data.data
          })
        }else if(this.userType === 1){
          this.activeName = this.teacherperiod
        }else{
          this.activeName = '小学'
        }
        this.selectedPeriod = this.activeName
        this.subjects = this.teachersubject.split(',')
        // getCatalogSubject(this.selectedPeriod).then(({ data }) => {
        //   this.subjects = data.data
        // })
    },
    getSubjects(period){
      if(this.userType === 1){
        if(period === this.teacherperiod){
          this.subjects = this.teachersubject.split(',')
        }else{
          this.selectedPeriod = period
          this.selectedSubject = ''
          getCatalogSubject(this.selectedPeriod).then(({ data }) => {
            this.subjects = data.data
          })
        }
      }
      this.isshow = false
      console.log(this.selectedPeriod)
    },
    clickshowSubject(period){
      if(this.isshow === false){
        //展开全部学科
        this.selectedPeriod = period
        getCatalogSubject(this.selectedPeriod).then(({ data }) => {
          this.subjects = data.data
        })
        this.isshow = true
        
      }else{
        //收起部分学科
        this.subjects = this.teachersubject.split(',')
        this.isshow = false
      }
    },
    //获取年级
    getGrades(subject) {
      this.selectedGrade = ''
      this.selectedSubject = subject
      getCatalogGrade({
        period: this.selectedPeriod,
        subject: this.selectedSubject
      }).then(({ data }) => {
        this.grades = data.data
      })
    },
    //获取课程
    getCourses(grade) {
      this.selectedGrade = grade
      getCatalog({
        grade: this.selectedGrade,
        subject: this.selectedSubject
      }).then(({ data }) => {
        this.courses = data.data
      })
    },
    //点击目录树节点
    handleNodeClick(courseTree) {
      if (courseTree.children) {
        this.searchlabel = ''
      } else {
        this.searchlabel = courseTree.label
      }

      let index
      if (this.searchlabel.indexOf('.1') > 0) {
        index = this.searchlabel.indexOf('.1') + 1
      } else if (this.searchlabel.indexOf('.2') > 0) {
        index = this.searchlabel.indexOf('.2') + 1
      } else if (this.searchlabel.indexOf('.3') > 0) {
        index = this.searchlabel.indexOf('.3') + 1
      } else if (this.searchlabel.indexOf('.4') > 0) {
        index = this.searchlabel.indexOf('.4') + 1
      } else if (this.searchlabel.indexOf('.5') > 0) {
        index = this.searchlabel.indexOf('.5') + 1
      } else if (this.searchlabel.indexOf('节') > 0) {
        index = this.searchlabel.indexOf('节')
      } else if (this.searchlabel.indexOf('课') > 0) {
        index = this.searchlabel.indexOf('课')
      } else if (this.searchlabel.indexOf('1') >= 0) {
        index = this.searchlabel.indexOf('1')
      } else if (this.searchlabel.indexOf('2') >= 0) {
        index = this.searchlabel.indexOf('2')
      } else if (this.searchlabel.indexOf('3') >= 0) {
        index = this.searchlabel.indexOf('3')
      } else if (this.searchlabel.indexOf('4') >= 0) {
        index = this.searchlabel.indexOf('4')
      } else if (this.searchlabel.indexOf('5') >= 0) {
        index = this.searchlabel.indexOf('5')
      } else if (this.searchlabel.indexOf('6') >= 0) {
        index = this.searchlabel.indexOf('6')
      } else if (this.searchlabel.indexOf('7') >= 0) {
        index = this.searchlabel.indexOf('7')
      } else if (this.searchlabel.indexOf('8') >= 0) {
        index = this.searchlabel.indexOf('8')
      } else if (this.searchlabel.indexOf('9') >= 0) {
        index = this.searchlabel.indexOf('9')
      } else if (this.searchlabel.indexOf('.') >= 0) {
        index = this.searchlabel.indexOf('.')
      } else if (this.searchlabel.indexOf('*') >= 0) {
        index = this.searchlabel.indexOf('*')
      } 
      else {
        index = -1
      }

      this.searchlabel = this.searchlabel.slice(index + 1)
      this.$router.push({
        path: '/Search',
        query: {
          q: this.searchlabel
        }
      })
    },
    // 获取轮播图
    getCarousel() {
      carousel().then((response) => {
        const { code, data } = response.data
        if (code === 200) {
          this.carouselData = data
        }
      })
    },
    // 查看资源
    viewResource(resourceID) {
      const target = this.$refs.resourceTarget
      target.setAttribute(
        'href',
        `${window.location.origin}/e-resource/#/resource/${resourceID}`
      )
      target.click()
    },
    // 获取推荐资源(热门资源、最新资源)
    getHotResource() {
      hotResource().then((response) => {
        if (response.data.code === 200) {
          this.hotResources = response.data.data
        }
      })
      
    },
    getNewResource() {
      newResource().then((response) => {
        if (response.data.code === 200) {
          this.newResources = response.data.data
        }
      })
    },
    //获取精选资源
    getBoutique(type) {
      // console.log(type)
      this.selectedType=''
      this.boutiqueResources=[]
        this.selectedType = type
        queryBoutiqueByType(
          this.selectedType
        ).then((response) => {
          this.boutiqueResources = response.data.data.slice(0, 8)
          console.log(this.boutiqueResources.length)
        })
    },
    getNowBoutique(){
      this.activeName_type = '全部'
      this.selectedType = this.activeName_type
      queryBoutiqueByType(
        this.selectedType
      ).then((response) => {
        this.boutiqueResources = response.data.data.slice(0, 8)
      })
    },
    viewResource(resourceID) {
      const target = this.$refs.resourceTarget
      target.setAttribute(
        'href',
        `${window.location.origin}/e-resource/#/resource/${resourceID}`
      )
      target.click()
    },
    //资源网站链接
    godearedu() {
      window.open('http://www.dearedu.com')
    },
    gozxxk() {
      window.open('http://www.zxxk.com')
    },
    goshijuan1() {
      window.open('http://www.shijuan1.com')
    },
    gojyeoo() {
      window.open('http://www.jyeoo.com')
    },
    gojiaoxi() {
      window.open('http://www.51jiaoxi.com')
    },
    go21cnjy() {
      window.open('http://www.21cnjy.com')
    },
    gofirst() {
      window.open('https://jyt.jiangsu.gov.cn/')
    },
    gosecond() {
      window.open('https://jyj.taizhou.gov.cn/')
    },
    gothird() {
      window.open('http://www.xinghua.gov.cn/')
    },

  }
}
</script>

<style scoped>
.main {
  background-color: #fffeff;
  /* min-height: calc(100vh - 80px); */
  height: 1980px;
  min-width: 1200px;
}
main {
  width: 1200px;
  margin: 0 auto;
}
.row_one {
  /* 24+1+50+1+24 */
  position:relative;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.row_two {
  position:relative;
  justify-content: space-between;
  top:420px;
  height: 100px;
}
.row_tree {
  /* 75+1+24 */
  position:relative;
  top: 930px;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  display: flex;
}
.row_four {
  position:relative;
  top:1380px;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.row_five {
  position:relative;
  top:1380px;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.catalogue {
  position: absolute;
  background-color: #fdfbfb;
  box-shadow: 1px 3px 6px rgb(122 122 122 / 0.3);
  overflow: hidden;
  height: 410px;
  width: 24%;
  
}
.subjectlist{
  height: 37px;
  font-size: 18px;
  padding: 5px;
  padding-left: 10%;
}
.clickshow{
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
}
.subjectlist i {
  float: right;
}
.subjectlist:hover {
  background-color:#d3eefa;
  color: #3098ec;
}
.gradelist {
position: absolute;
z-index: 999;
background-color: #fdfbfb;
box-shadow: 1px 3px 6px rgb(122 122 122 / 0.3);
margin-top: 3.4%;
margin-left: 24%;
height: 370px;
width: 170px;
}
.gradelist_item {
  height: 30px;
  font-size: 15px;
  padding: 5px;
  padding-left: 10%;
}
.gradelist_item i {
  float: right;
}
.gradelist_item:hover {
  background-color:#d3eefa;
  color: #3098ec;
}
.cataloguelist {
  position: absolute;
  z-index: 999;
  background-color: #fffafa;
  box-shadow: 1px 3px 6px rgb(122 122 122 / 0.3);
  margin-top: 3.4%;
  margin-left: 38%;
  height: 370px;
  width: 300px;
}

.carousel {
  position: absolute;
  width: 50%;
  height: 410px;
  left: 24%;
  top:-13px;
}
.card {
  position: absolute;
  background-color: #fdfbfb;
  box-shadow: 1px 3px 6px rgb(122 122 122 / 0.3);
  overflow: hidden;
  height: 410px;
  width: 24%;
  left: 76%;
}
.card:last-child {
  margin-right: 0;
}
.title {
  font-size: 20px;
  font-weight: bold;
}

.list-container {
  height: 100%;
  width: 95%;
}
.list-container >>> .resource-name {
  color: #606266;
}

.carousel-container {
  height: 100%;
  cursor: pointer;
}

.carousel-container div {
  height: 100%;
}
.concept {
  position: absolute;
  background-color: #fdfbfb;
  box-shadow: 1px 3px 6px rgb(122 122 122 / 0.3);
  overflow: hidden;
  width: 100%;
}
.concept h2 {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  font-size: 1.3rem;
  margin-top: 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: solid 1px #a5a3a3;
}
.boutique-container {
  position: absolute;
  background-color: #fdfbfb;
  box-shadow: 1px 3px 6px rgb(122 122 122 / 0.3);
  overflow: hidden;
  width: 75%;
}
.boutique-container h2 {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  font-size: 1.3rem;
  margin-top: 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: solid 1px #a5a3a3;
}
.boutique-resource-head {
  margin-top: -0.8rem;
}
.boutique-resource-body{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.boutique-resource {
  padding: 1rem 1rem 0;
  justify-content: space-between;
}
.boutique-resource .resource-info {
  display: flex;
  flex-direction: column;
  width: 23%;
  margin-bottom: 1.5rem;
}

.boutique-resource .resource-info .thumbnail {
  height: 120px;
  box-shadow: 1px 3px 6px rgb(122 122 122 / 0.2);
  cursor: pointer;
}
.boutique-resource .resource-info .thumbnail_img {
  height: 120px;
  box-shadow: 1px 3px 6px rgb(122 122 122 / 0.2);
}

.boutique-resource .resource-info .resource-name {
  margin-top: 0.5rem;
  text-decoration: none;
  color: #606266;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.boutique-resource .resource-info .resource-name_img {
  margin-top: 0.5rem;
  text-decoration: none;
  color: #606266;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.boutique-resource .resource-info .resource-name:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.resource-statistics {
  position: absolute;
  background-color: #fdfbfb;
  box-shadow: 1px 3px 6px rgb(122 122 122 / 0.3);
  overflow: hidden;
  width: 24%;
  left:76%;
}
.resource-statistics h2 {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  font-size: 1.3rem;
  margin-top: 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: solid 1px #a5a3a3;
}

.linkcard {
  background-color: #fdfbfb;
  box-shadow: 1px 3px 6px rgb(122 122 122 / 0.3);
  overflow: hidden;
  width: 100%;
}
.linkcard h2 {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}
.linkcard h2 {
  font-size: 1.3rem;
  margin-top: 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: solid 1px #a5a3a3;
}
.resourcelink {
  display: flex;
}
.link {
  width: 10%;
  height: 50%;
  margin-left: 4rem;
  margin-top: 1rem;
}
.link p{
  text-align: center;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.link img {
  height: 40px;
}
.govlink {
  width: 15%;
  height: 50%;
  margin-left: 2rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.govlink img {
  height: 40px;
}


</style>